﻿<!DOCTYPE html>

<!-- map.js: elevated provinces -->

<html>
<head>
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<script src="js/three.min.js"></script>
	<script src="js/OrbitControls.js"></script>
	<link rel="stylesheet" href="example.css">
</head>

<body>
	<script type="module">
	
		import {Map} from '../map.js';
		import {scene} from './example.js';


		new Map( '../map.xml', drawMap );

		function drawMap( map )
		{
			for( var regionName in map.regions )
				if( regionName!='BG' )
				{
					var value = Math.random(),
						color = new THREE.Color( value, 0.6, 1-value ),
						height = 1+3*value;
					
					scene.add( map.region3D( regionName, height, color ) );
					scene.add( map.region2D( regionName, height ) );
				}
		}
		 
		 
	</script>
</body>
</html>


